<template>
  <div class="bigbox animate__animated animate__jello">
    <div class="corss">
      <playheader></playheader>
      <!-- 播放界面s -->
      <div class="main" @click="none">
        <!-- 播放S -->
        <audio
          :src="$store.state.link"
          autoplay
          preload="auto"
          ref="music"
          @click="none"
          @timeupdate="updateTime"
          @ended="musicEnded"
        ></audio>
        <!-- 播放E -->
        <div class="songwrap">
          <div class="songdisc">
            <span v-show="isShow"></span>
            <div
              class="songturn"
              @click="none"
              :class="isShow ? 'stop' : 'play'"
            >
              <!-- songturn转  -->
              <div class="rollwarp">
                <div class="songimg">
                  <img :src="this.pic" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 播放界面E-->
      <!-- 歌词 S-->
      <div class="lyricsbox">
        <div class="title">
          <p>{{ this.singerList.name }}</p>
          -
          <span>
            {{ singerList.ar[0].name }}
            {{ singerList.ar[1] && "/" + singerList.ar[1].name }}
            {{ singerList.ar[2] && "/" + singerList.ar[2].name }}
          </span>
        </div>
        <div class="songlrc">
          <ul class="songinner" ref="songinner">
            <li
              v-for="(item, index) in NewlyricList"
              :key="index"
              ref="lyric"
              :data-index="index"
            >
              {{ item.lyricText }}
            </li>
          </ul>
        </div>
        <!-- 歌词 E-->
      </div>

      <!-- 动画 E-->
      <div class="thissong">
        <div class="sing">
          <img src="@/img/musicStreet.png" />
        </div>
        <!-- 翻页 -->
        <div class="up">
          <div class="bgi"></div>
        </div>
      </div>
      <!-- 动画 S-->
    </div>

    <ItemTitle itemName="包括这首歌的歌单" style="color: #fff"> </ItemTitle>
    <album style="color: #fff"></album>
    <ItemTitle itemName="喜欢这首歌的人也听" style="color: #fff"> </ItemTitle>
    <newMusic></newMusic>
    <comments></comments>
  </div>
</template>

<script>
import playheader from "@/components/play/playheader.vue";
import ItemTitle from "@/components/recommend/ItemTitle.vue";
import album from "@/components/recommend/album.vue";
import newMusic from "@/components/recommend/newMusic.vue";
import comments from "@/components/play/comments.vue";
import { lyric } from "@/api/play";
export default {
  components: {
    playheader,
    // playthis,
    ItemTitle,
    album,
    newMusic,
    comments,
  },
  data() {
    return {
      isShow: false,
      pic: sessionStorage.getItem("piclink"),
      lyricList: [],
      NewlyricList: [],
      lyricTime: "",
      lyricText: "",
      arrInfo: {},
      singerList: JSON.parse(sessionStorage.getItem("singerList")),
      musicStop: false,
    };
  },
  methods: {
    updateTime() {
      if (this.musicStop) return;
      // console.log(this.$refs.music.currentTime );
      //获取当前播放时间
      this.NewlyricList.forEach((item, index) => {
        if (this.$refs.music.currentTime > parseInt(item.lyricTime)) {
          // if(this.$refs.lyric[index]===this.$refs.lyric[index].dataset.index){
          this.$refs.songinner.style.transform = `translateY(-${30 * index}px)`;
          // }
        }
      });
    },

    none() {
      this.isShow = !this.isShow;
      if (this.isShow == true) {
        this.$refs.music.pause();
      } else {
        this.$refs.music.play();
      }
    },
    musicEnded() {
      this.isShow = !this.isShow;
    },
  },
  created: function () {
    lyric(this.$route.query.ID).then((res) => {
      this.lyricList = res.data.lrc.lyric.split("\n");
      this.lyricList.forEach((item) => {
        if (item.length > 10) {
          this.lyricTime =
            Number(item.slice(1, 6).split(":")[0] * 60) +
            Number(item.slice(1, 8).split(":")[1]);
          this.lyricText = item.slice(11);
          this.arrInfo = {
            lyricText: this.lyricText,
            lyricTime: this.lyricTime,
          };
          return this.NewlyricList.push(this.arrInfo);
        }
      });
    });
  },
  beforeDestroy() {
    this.$refs.music.pause();
    this.musicStop = true;
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
  width: 100vw;
  height: calc(100vh - 60px);
  overflow-y: scroll;
  scrollbar-width: none; /* firefox */
  &::-webkit-scrollbar {
    display: none;
  }
  .corss {
    height: 100vh;
    position: relative;
    .main {
      .songwrap {
        padding-top: vw(120);
        margin: 0 auto;
        .songdisc {
          position: relative;
          z-index: 5;
          span {
            position: absolute;
            z-index: 4;
            width: vw(80);
            height: vw(80);
            background: url(//s3.music.126.net/mobile-new/img/play_btn_3x.png?4da7e135b7c089f3777ec5cdbbb3a8d8=)
              no-repeat;
            background-size: contain;
            top: 42%;
            left: 45%;
          }
          &::after {
            content: "";
            width: vw(280);
            height: vw(360);
            position: absolute;
            top: -25%;
            left: 46%;
            background: url(//s3.music.126.net/mobile-new/img/needle.png?702cf6d95f29e2e594f53a3caab50e12=)
              no-repeat;
            background-size: 68%;
            z-index: 5;
          }
          .songturn {
            margin: 0 auto;
            width: vw(540);
            height: vw(540);
            position: relative;
            animation: turn 20s linear infinite;
            &:before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: url(//s3.music.126.net/mobile-new/img/disc-plus.png?b700b62e1971b351dcb8b8ce1c9ceea3=)
                no-repeat;
              background-size: contain;
              z-index: 2;
            }
            .rollwarp {
              width: vw(340);
              height: vw(340);
              position: absolute;
              top: 18%;
              left: 19%;
              .songimg {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
                img {
                  width: 100%;
                }
              }
            }
          }
          .stop {
            animation-play-state: paused;
          }
          .play {
            animation-play-state: running;
          }
        }
      }
    }
    .lyricsbox {
      margin-top: vw(80);
      position: relative;
      z-index: 1;
      .title {
        color: #fefefe;
        display: flex;
        justify-content: center;
        white-space: nowrap;
        line-height: 1.1;
        align-items: center;
        align-content: center;
        span {
          color: hsla(0, 0%, 100%, 0.6);
        }
      }
      .songlrc {
        height: 100px;
        margin-top: vw(20);
        text-align: center;
        color: #fefefe;
        line-height: 30px;
        mask: -webkit-linear-gradient(top, #000, #000 20%, rgba(0, 0, 0, 0));
        .songinner {
          overflow-y: scroll;
          p {
            font-size: vw(28);
          }
        }
      }
    }
    .thissong {
      margin-top: 15px;
      z-index: 20;
      left: 0;
      right: 0;
      box-sizing: border-box;
      .sing {
        margin: 0 auto;
        border-radius: 26px;
        border: 1px solid hsla(0, 0%, 100%, 0.13);
        height: 30px;
        line-height: 30px;
        width: vw(200);
        img {
          width: 100%;
          height: 30px;
        }
      }
      .up {
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translate(-50%, -50%);
        .bgi {
          width: 20px;
          height: 12px;
          margin: 0 auto;
          background-repeat: no-repeat;
          background-size: 17px auto;
          background-image: url();
          animation: shining 1.2s steps(1) infinite;
        }
      }
    }
  }
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes shining {
  0% {
    background-position: 0 0;
  }
  15% {
    background-position: 0 -12px;
  }
  30% {
    background-position: 0 -24px;
  }
  45% {
    background-position: 0 -36px;
  }
  60% {
    background-position: 0 -48px;
  }
  75% {
    background-position: 0 -60px;
  }
  90% {
    background-position: 0 -72px;
  }
  100% {
    background-position: 0 -84px;
  }
}
</style>